<template>
    <el-dialog title="是否上线" :visible.sync="failData.dialogState" size="tiny"  class="dialog-box"  @close="close('dataForm')" >
        <el-form class="form-content"  :model="dataForm" :rules="rules" ref="dataForm" label-width="0px"  label-position='left'>
            <el-row :gutter="21" class="school-item">
                <el-col :span="24">
                    <el-form-item label="是否推送：" label-width="100px">
                        <el-switch
                            v-model="value1"
                            on-text=""
                            off-text="">
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="value1 === true">
                <el-col :span="24">
                    <el-form-item label="" prop="pushMessage">
                        <el-popover
                        placement="top-start"
                        trigger="focus" 
                        content="长度在25个字以内。">
                            <el-input type="textarea" :rows="4" slot="reference" :maxlength="25" placeholder="请输入消息推送的内容，限25个字以内" v-model="dataForm.pushMessage"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('dataForm')"> 取 消 </el-button>
            <el-button type="primary" @click="submitForm('dataForm')" :loading='loading'> 确 定 </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { uplodAdvert } from 'api/advApi';
    export default {
        props: {
            failData: {
                default() {
                    return {
                        advertId: '',
                        dialogState: false
                    }
                },
                required: true
            }
        },
        data() {
            return {
                value1: true,
                loading: false,
                dataForm: {
                    pushMessage: ''
                },
                rules: {
                    pushMessage: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                        { min: 1, max: 25, message: '长度在25个字以内', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (valid) {
                        // isPush, pushMessage
                        this.loading = true;
                        if (!this.value1) {
                            this.dataForm.pushMessage = '';
                        }
                        uplodAdvert(this.failData.advertId, this.value1? '1': '0', this.dataForm.pushMessage).then(data => {
                            this.$emit('search');
                            this.$message({
                                type: 'success',
                                message: '上线成功!'
                            });
                            console.log('search');
                            this.loading = false;
                            this.failData.dialogState = false;
                        }).catch(Error => {
                            this.loading = false;
                            this.$message.error(Error);
                            this.failData.dialogState = false;
                        })
                    }
                })
            },
            resetForm(dataForm) {
                this.failData.dialogState = false;
                this.value1 = true;
                this.$refs[dataForm].resetFields();
            },
            close(dataForm) {
                this.failData.dialogState = false;
                this.value1 = true;
                this.$refs[dataForm].resetFields();
            }
        }
    }

</script>

<style lang="scss" scoped>
    .dialog-box{
        .form-content{
            width: 80%;
            margin: 0 auto; 
        }
        .dialog-footer{
            width: 100%;
            margin: 0 auto; 
            text-align:center;
        }
    }
</style>